<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: lightskyblue;
        }
        section{
            width: 200px;
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="d"></div>
    <form action="javascript:;">
        <input type="text" placeholder="">
        <input type="submit" value="提交">
    </form>
    <section>

    </section>
</body>
</html>
<script>

// 鼠标事件

    $('#d').click(function(){
        $('#d').html('点击了div')
    })

    $('#d').dblclick(function(){
        $('#d').html('双击了div')
    })

    $('#d').mouseenter(function(){
        console.log('鼠标进入了div')
    })

    $('#d').mouseleave(function(){
        console.log('鼠标离开了div')
    })

    $('#d').mouseover(function(){
        console.log('鼠标进入了div')
    })

    $('#d').mouseout(function(){
        console.log('鼠标离开了div')
    })


    $(document).mousemove(function(){
        console.log('鼠表在移动')
    })


    $(document).mousedown(function(){
        console.log('鼠表在文档中按下')
    })

    $(document).mouseup(function(){
        console.log('鼠表在文档中抬起')
    })

    $('#d').hover(function(){
        $('#d').css('backgroundColor','red')
    },function(){
        $('#d').css('backgroundColor','green')
    })

// 键盘事件
    $(document).keydown(function(){
        console.log('按下了键盘')
    })

    $(document).keyup(function(){
        console.log('松开了键盘')
    })
    
    $(document).keypress(function(){
        $('#d').css('backgroundColor','yellow')
    })

// 表单事件
    $('input').focus(function(){
        console.log('获取到焦点')
    })

    $('input').blur(function(){
        console.log('失去了焦点')
    })

    $('input').focusin(function(){
        console.log('获取到焦点(支持冒泡)')
    })

    $('input').focusout(function(){
        console.log('失去了焦点(支持冒泡)')
    })

    $('input').change(function(){
        console.log('内容发生改变')
    })

    $('form').submit(function(){
        $('div').css('backgroundColor','black')
    })

// 浏览器事件
    $(window).resize(function(){
        console.log('浏览器大小发生了变化')
    })

    $(window).scroll(function(){
        console.log('滚动条发生了变化')
    })

// 文档加载
    $(window).ready(function(){
        alert('页面加载完毕')
    })
</script>